<template>
	<view class="m-item" :id="'message'+cid">
		<view class="m-left">
			<image class="head_icon" src="/static/homeHL.png" v-if="message.user=='home'"></image>
		</view>
		<view class="m-content">
			<view class="m-content-head" :class="{'m-content-head-right':message.user=='customer'}">
				<view :class="'m-content-head-'+message.user" class="bubble">
				<rich-text :nodes="replaceEmoji(message.content)"></rich-text></view>
			</view>
		</view>
		<view class="m-right">
			<image class="head_icon" src="/static/customerHL.png" v-if="message.user=='customer'"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message: {
				type: Object,
				default () {
					return {};
				}
			},
			cid: {
				type: [Number, String],
				default: ''
			},
		},
		data() {
			return {
			emojiList:[
		[{
				"url": "emoji_0@2x.png",
				"alt": "[NO]"
			},
			{
				"url": "emoji_1@2x.png",
				"alt": "[OK]"
			},
			{
				"url": "emoji_2@2x.png",
				"alt": "[下雨]"
			},
			{
				"url": "emoji_3@2x.png",
				"alt": "[么么哒]"
			},
			{
				"url": "emoji_4@2x.png",
				"alt": "[乒乓]"
			},
			{
				"url": "emoji_5@2x.png",
				"alt": "[便便]"
			},
			{
				"url": "emoji_6@2x.png",
				"alt": "[信封]"
			},
			{
				"url": "emoji_7@2x.png",
				"alt": "[偷笑]"
			},
			{
				"url": "emoji_8@2x.png",
				"alt": "[傲慢]"
			},
			{
				"url": "emoji_9@2x.png",
				"alt": "[再见]"
			},
			{
				"url": "emoji_10@2x.png",
				"alt": "冷汗"
			},
			{
				"url": "emoji_11@2x.png",
				"alt": "[凋谢]"
			},
			{
				"url": "emoji_140@2x.png",
				"alt": "[鼓掌]"
			},
			{
				"url": "emoji_13@2x.png",
				"alt": "[删除]"
			},
			{
				"url": "emoji_14@2x.png",
				"alt": "[勾引]"
			},
			{
				"url": "emoji_15@2x.png",
				"alt": "[发呆]"
			},
			{
				"url": "emoji_16@2x.png",
				"alt": "[发抖]"
			},
			{
				"url": "emoji_17@2x.png",
				"alt": "[可怜]"
			},
			{
				"url": "emoji_18@2x.png",
				"alt": "[可爱]"
			},
			{
				"url": "emoji_19@2x.png",
				"alt": "[右哼哼]"
			},
			{
				"url": "emoji_20@2x.png",
				"alt": "[右太极]"
			},
			{
				"url": "emoji_21@2x.png",
				"alt": "[右车头]"
			},
			{
				"url": "emoji_22@2x.png",
				"alt": "[吐]"
			},
			{
				"url": "emoji_23@2x.png",
				"alt": "[吓]"
			}
		],
		[{
				"url": "emoji_24@2x.png",
				"alt": "[咒骂]"
			},
			{
				"url": "emoji_25@2x.png",
				"alt": "[咖啡]"
			},
			{
				"url": "emoji_26@2x.png",
				"alt": "[啤酒]"
			},
			{
				"url": "emoji_27@2x.png",
				"alt": "[嘘]"
			},
			{
				"url": "emoji_28@2x.png",
				"alt": "[回头]"
			},
			{
				"url": "emoji_29@2x.png",
				"alt": "[困]"
			},
			{
				"url": "emoji_30@2x.png",
				"alt": "[坏笑]"
			},
			{
				"url": "emoji_31@2x.png",
				"alt": "[多云]"
			},
			{
				"url": "emoji_32@2x.png",
				"alt": "[大兵]"
			},
			{
				"url": "emoji_33@2x.png",
				"alt": "[大哭]"
			},
			{
				"url": "emoji_34@2x.png",
				"alt": "[太阳]"
			},
			{
				"url": "emoji_35@2x.png",
				"alt": "[奋斗]"
			},
			{
				"url": "emoji_36@2x.png",
				"alt": "[奶瓶]"
			},
			{
				"url": "emoji_37@2x.png",
				"alt": "[委屈]"
			},
			{
				"url": "emoji_38@2x.png",
				"alt": "[害羞]"
			},
			{
				"url": "emoji_39@2x.png",
				"alt": "[尴尬]"
			},
			{
				"url": "emoji_40@2x.png",
				"alt": "[左哼哼]"
			},
			{
				"url": "emoji_41@2x.png",
				"alt": "[左太极]"
			},
			{
				"url": "emoji_42@2x.png",
				"alt": "[左车头]"
			},
			{
				"url": "emoji_43@2x.png",
				"alt": "[差劲]"
			},
			{
				"url": "emoji_44@2x.png",
				"alt": "[弱]"
			},
			{
				"url": "emoji_45@2x.png",
				"alt": "[强]"
			},
			{
				"url": "emoji_46@2x.png",
				"alt": "[彩带]"
			},
			{
				"url": "emoji_47@2x.png",
				"alt": "[彩球]"
			}
		],
		[{
				"url": "emoji_48@2x.png",
				"alt": "[得意]"
			},
			{
				"url": "emoji_49@2x.png",
				"alt": "[微笑]"
			},
			{
				"url": "emoji_50@2x.png",
				"alt": "[心碎了]"
			},
			{
				"url": "emoji_51@2x.png",
				"alt": "[快哭了]"
			},
			{
				"url": "emoji_52@2x.png",
				"alt": "[怄火]"
			},
			{
				"url": "emoji_53@2x.png",
				"alt": "[怒]"
			},
			{
				"url": "emoji_54@2x.png",
				"alt": "[惊恐]"
			},
			{
				"url": "emoji_55@2x.png",
				"alt": "[惊讶]"
			},
			{
				"url": "emoji_56@2x.png",
				"alt": "[憨笑]"
			},
			{
				"url": "emoji_141@2x.png",
				"alt": "[龇牙]"
			},
			{
				"url": "emoji_58@2x.png",
				"alt": "[打哈欠]"
			},
			{
				"url": "emoji_59@2x.png",
				"alt": "[抓狂]"
			},
			{
				"url": "emoji_60@2x.png",
				"alt": "[折磨]"
			},
			{
				"url": "emoji_61@2x.png",
				"alt": "[抠鼻]"
			},
			{
				"url": "emoji_62@2x.png",
				"alt": "[抱抱]"
			},
			{
				"url": "emoji_63@2x.png",
				"alt": "[抱拳]"
			},
			{
				"url": "emoji_64@2x.png",
				"alt": "[拳头]"
			},
			{
				"url": "emoji_65@2x.png",
				"alt": "[挥手]"
			},
			{
				"url": "emoji_66@2x.png",
				"alt": "[握手]"
			},
			{
				"url": "emoji_67@2x.png",
				"alt": "[撇嘴]"
			},
			{
				"url": "emoji_68@2x.png",
				"alt": "[擦汗]"
			},
			{
				"url": "emoji_69@2x.png",
				"alt": "[敲打]"
			},
			{
				"url": "emoji_70@2x.png",
				"alt": "[晕]"
			},
			{
				"url": "emoji_71@2x.png",
				"alt": "[月亮]"
			}
		],
		[{
				"url": "emoji_72@2x.png",
				"alt": "[棒棒糖]"
			},
			{
				"url": "emoji_73@2x.png",
				"alt": "[汽车]"
			},
			{
				"url": "emoji_74@2x.png",
				"alt": "[沙发]"
			},
			{
				"url": "emoji_75@2x.png",
				"alt": "[流汗]"
			},
			{
				"url": "emoji_76@2x.png",
				"alt": "[流泪]"
			},
			{
				"url": "emoji_77@2x.png",
				"alt": "[激动]"
			},
			{
				"url": "emoji_78@2x.png",
				"alt": "[灯泡]"
			},
			{
				"url": "emoji_79@2x.png",
				"alt": "[炸弹]"
			},
			{
				"url": "emoji_80@2x.png",
				"alt": "[熊猫]"
			},
			{
				"url": "emoji_81@2x.png",
				"alt": "[爆筋]"
			},
			{
				"url": "emoji_82@2x.png",
				"alt": "[爱你]"
			},
			{
				"url": "emoji_83@2x.png",
				"alt": "[爱心]"
			},
			{
				"url": "emoji_84@2x.png",
				"alt": "[爱情]"
			},
			{
				"url": "emoji_85@2x.png",
				"alt": "[猪头]"
			},
			{
				"url": "emoji_86@2x.png",
				"alt": "[猫咪]"
			},
			{
				"url": "emoji_87@2x.png",
				"alt": "[献吻]"
			},
			{
				"url": "emoji_88@2x.png",
				"alt": "[玫瑰]"
			},
			{
				"url": "emoji_89@2x.png",
				"alt": "[瓢虫]"
			},
			{
				"url": "emoji_90@2x.png",
				"alt": "[疑问]"
			},
			{
				"url": "emoji_91@2x.png",
				"alt": "[白眼]"
			},
			{
				"url": "emoji_92@2x.png",
				"alt": "[皮球]"
			},
			{
				"url": "emoji_93@2x.png",
				"alt": "[睡觉]"
			},
			{
				"url": "emoji_94@2x.png",
				"alt": "[磕头]"
			},
			{
				"url": "emoji_95@2x.png",
				"alt": "[示爱]"
			}
		],
		[{
				"url": "emoji_96@2x.png",
				"alt": "[礼品袋]"
			},
			{
				"url": "emoji_97@2x.png",
				"alt": "[礼物]"
			},
			{
				"url": "emoji_98@2x.png",
				"alt": "[篮球]"
			},
			{
				"url": "emoji_99@2x.png",
				"alt": "[米饭]"
			},
			{
				"url": "emoji_100@2x.png",
				"alt": "[糗大了]"
			},
			{
				"url": "emoji_101@2x.png",
				"alt": "[红双喜]"
			},
			{
				"url": "emoji_102@2x.png",
				"alt": "[红灯笼]"
			},
			{
				"url": "emoji_103@2x.png",
				"alt": "[纸巾]"
			},
			{
				"url": "emoji_104@2x.png",
				"alt": "[胜利]"
			},
			{
				"url": "emoji_105@2x.png",
				"alt": "[色]"
			},
			{
				"url": "emoji_106@2x.png",
				"alt": "[药]"
			},
			{
				"url": "emoji_138@2x.png",
				"alt": "[麦克风]"
			},
			{
				"url": "emoji_108@2x.png",
				"alt": "[蛋糕]"
			},
			{
				"url": "emoji_109@2x.png",
				"alt": "[蜡烛]"
			},
			{
				"url": "emoji_110@2x.png",
				"alt": "[街舞]"
			},
			{
				"url": "emoji_111@2x.png",
				"alt": "[衰]"
			},
			{
				"url": "emoji_112@2x.png",
				"alt": "[西瓜]"
			},
			{
				"url": "emoji_113@2x.png",
				"alt": "[调皮]"
			},
			{
				"url": "emoji_114@2x.png",
				"alt": "[象棋]"
			},
			{
				"url": "emoji_115@2x.png",
				"alt": "[跳绳]"
			},
			{
				"url": "emoji_116@2x.png",
				"alt": "[跳跳]"
			},
			{
				"url": "emoji_117@2x.png",
				"alt": "[车厢]"
			},
			{
				"url": "emoji_118@2x.png",
				"alt": "[转圈]"
			},
			{
				"url": "emoji_119@2x.png",
				"alt": "[鄙视]"
			}
		],
		[

			{
				"url": "emoji_120@2x.png",
				"alt": "[酷]"
			},
			{
				"url": "emoji_121@2x.png",
				"alt": "[钞票]"
			},
			{
				"url": "emoji_122@2x.png",
				"alt": "[钻戒]"
			},
			{
				"url": "emoji_123@2x.png",
				"alt": "[闪电]"
			},
			{
				"url": "emoji_124@2x.png",
				"alt": "[闭嘴]"
			},
			{
				"url": "emoji_125@2x.png",
				"alt": "[闹钟]"
			},
			{
				"url": "emoji_126@2x.png",
				"alt": "[阴险]"
			},
			{
				"url": "emoji_127@2x.png",
				"alt": "[难过]"
			},
			{
				"url": "emoji_128@2x.png",
				"alt": "[雨伞]"
			},
			{
				"url": "emoji_129@2x.png",
				"alt": "[青蛙]"
			},
			{
				"url": "emoji_130@2x.png",
				"alt": "[面条]"
			},
			{
				"url": "emoji_131@2x.png",
				"alt": "[鞭炮]"
			},
			{
				"url": "emoji_132@2x.png",
				"alt": "[风车]"
			},
			{
				"url": "emoji_133@2x.png",
				"alt": "[飞吻]"
			},
			{
				"url": "emoji_134@2x.png",
				"alt": "[飞机]"
			},
			{
				"url": "emoji_135@2x.png",
				"alt": "[饥饿]"
			},
			{
				"url": "emoji_136@2x.png",
				"alt": "[香蕉]"
			},
			{
				"url": "emoji_137@2x.png",
				"alt": "[骷髅]"
			}
		]
	],
			}
		},
		methods: {
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					//console.log("item: " + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								/* let onlinePath = 'https://www.xxx.com/emoji/'
								let imgstr = '<img width="40px" src="' + onlinePath + EM.url + '">'; */
								let imgstr = '<img width="40px" src="/static/img/emoji/'  + EM.url + '">';
								//console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
			},
		}
	}
</script>

<style lang="scss">
	.m-item {
		display: flex;
		flex-direction: row;
		padding-top: 40upx;
	}

	.m-left {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}

	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
	}

	.m-right {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}

	.head_icon {
		width: 80upx;
		height: 80upx;
	}

	.m-content-head {
		position: relative;
	}

	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
	}

	.m-content-head-home {
		text-align: left;
		background: #1482d1;
		border: 1px #1482d1 solid;
		border-radius: 20upx;
		padding: 20upx;
		color: white;
		display: inline-block;
	}

	.m-content-head-home:before {
		border: 15upx solid transparent;
		border-right: 15upx solid #1482d1;
		left: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}

	.m-content-head-customer {
	/* 	border: 1upx white solid;
		background: white;
		border-radius: 20upx;
		padding: 20upx; */
		text-align: left;
		background: #6ad421;
		border: 1px #6ad421 solid;
		border-radius: 20upx;
		padding: 20upx;
		color: white;
		display: inline-block;
	}

	.m-content-head-customer:after {
		/* border: 15upx solid transparent;
		border-left: 15upx solid white;
		top: 20upx;
		right: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' ' */
		border: 15upx solid transparent;
		border-left: 15upx solid #6ad421;
		top: 20upx;
		right: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
	
</style>
